import React ,{useEffect} from 'react'
import {Modal,Form, Input, Button, Select} from "antd"
import {useStore} from "react-redux"
import * as api from "../api/index"

const { Option } = Select;
function My_modal({flag,handleCancel,handleOk,obj}) {
    // console.log(obj,new Date().getTime());
    const store = useStore()
    const [form] = Form.useForm();

    useEffect(()=>{
        if (obj.text === "新增") {
            console.log("新增");
            form.setFieldsValue({
                key:"",
                name:"",
                sex:"",
                city:"",
                state:""
            })
        }else {
            form.setFieldsValue({
                ...obj
            })
        }
    },[obj])

    const onFinish = (values) => {
        console.log('Success:', values);
        if (obj.text === "新增") {
            values.id = new Date().getTime()
            store.dispatch(api.add_table_data(values))
        }else{
            values.id = obj.id
            store.dispatch(api.edit_table_data(values))
        }
      
        handleOk()
    };
    
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const onGenderChange = (value) => {
        switch (value) {
          case '已完成':
            form.setFieldsValue({
              note: 'Hi, 已完成!',
            });
            return;
    
          case '进行中':
            form.setFieldsValue({
              note: 'Hi, 进行中!',
            });
            return;
    
          case '未完成':
            form.setFieldsValue({
              note: 'Hi 未完成!',
            });
        default:
                form.setFieldsValue({
                    note: 'Hi, 已完成!',
                  });
            return 
        }
    };
    // `${obj.text}1111111111111111`
    return (
        <div>
            <Modal  form={form}  title={`${obj.text}  Modal`} visible={flag} footer={null} onCancel={handleCancel} destroyOnClose>
            <Form
                name="basic"
                form={form}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                >
                    <Form.Item
                        label="key"
                        name="key"
                        rules={[{ required: true, message: 'Please input your key!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your name!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="sex"
                        name="sex"
                        rules={[{ required: true, message: 'Please input your sex!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="city"
                        name="city"
                        rules={[{ required: true, message: 'Please input your city!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="state"
                        name="state"
                        rules={[{ required: true, message: 'Please input your state!' }]}
                    >
                        <Select  placeholder="Please input your state"  onChange={onGenderChange}>
                            <Option value="已完成">已完成</Option>
                            <Option value="进行中">进行中</Option>
                            <Option value="未完成">未完成</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 10 }}>
                        <Button type="primary" onClick={handleCancel}>
                                取消
                            </Button>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default My_modal
